{% extends "index.html" %}
{% block content %}
    <div class="page-title">
        <div class="title_left">
            <h3>双色球列表</h3>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12 ">
            <div class="x_panel">
                <div class="x_title">
                    <button id="update100" class="btn btn-primary" type="button">更新100期</button>
                    <button id="prediction" class="btn btn-primary" type="button">预测</button>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-box table-responsive">
                                <table id="moduleTable" class="table table-striped table-bordered" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>IssueNo</th>
                                        <th>RedBall</th>
                                        <th>BlueBall</th>
                                        <th width="150px;">TotalSales</th>
                                        <th>CreateDate</th>
                                    </tr>
                                    </thead>

                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(function() {
        initTable(DEFAULT_PAGE_SIZE);

        //预测事件
        $("#prediction").on("click", function(){
            update();
        })

        // 更新按钮绑定更新事件
        $("#update100").on("click", function(){
            updateDcbs(100);
        })
    });

//更新100期
    function updateDcbs(number) {
        $.ajax({
            url : "/spider/dcbs/" + number,
            type : "get",
            success : function (rs) {
                alert(rs.message);
            },
            error : function (data) {
                alert(data.responseText);
            }
        });
    }

    //预测
    function update() {
        $.ajax({
            url : "/spider/dcbs/update" ,
            type : "get",
            success : function (rs) {
                alert(rs.data);
            },
            error : function (data) {
                alert(data.responseText);
            }
        });
    }

    var DEFAULT_PAGE_SIZE = 10;
    function initTable(pageSize) {
        $('#moduleTable').DataTable({
            'paging': true, //分页
            "serverSide": true, //开启后端分页
            "pagingType": "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
            "pageLength": pageSize, //定义初始的页长
            "processing": true,
            "destroy": true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
            'lengthChange': true, //控制是否能够调整每页的条数
            'searching': true,
            'data-show-refresh': true,
            'ordering': true,
            'autoWidth': false,
            "ajax": function (data, callback, settings) {
                // 从data获取查询数据
                var columIndex = data.order[0].column;
                var direction = data.order[0].dir;
                var orderBy = data.columns[columIndex].name;
                pageSize = data.length == undefined  ? pageSize : data.length;

                var searchBean = {};
                searchBean.currentPage = (data.start / pageSize) + 1;
                searchBean.pageSize = pageSize;
                searchBean.sort = orderBy;
                searchBean.direction = direction;
                searchBean.keyword = data.search.value;

                $.ajax({
                    url : "/api/dcbs",
                    type : "post",
                    contentType: "application/json",
                    data : JSON.stringify(searchBean),
                    success : function (rs) {
                        // 定义表格数据结构
                        var tableData = {
                            draw :0,
                            recordsTotal: 0,
                            recordsFiltered: 0,
                            data: []
                        };
                        if (!rs) {
                            alert("请求出错，请稍后重试");
                            callback(tableData);
                            return;
                        };
                        if (rs.list == null) {
                            $('#moduleTable tbody tr').remove();
                            $('#loading').remove();
                            callback(tableData);
                            return;
                        }
                        $('#loading').remove();
                        var rowsData = [];
                        for (var i = 0; i < rs.list.length; i++) {
                            //包装行数据
                            var rowData = new RowData(rs.list[i].id, rs.list[i].issueNo, rs.list[i].redBall,
                                    rs.list[i].blueBall, rs.list[i].totalSales, rs.list[i].firstPrizeNumber,
                                rs.list[i].secondPrizeNumber, rs.list[i].createDate);
                            // 将行数据放到数组里
                            rowsData.push(rowData);
                        }
                        tableData.data = rowsData;
                        tableData.recordsTotal = rs.total;
                        tableData.recordsFiltered = rs.total;
                        callback(tableData);
                    },
                    error : function (data) {
                        alert(data.responseText);
                    }
                });
            },
            "columns": [ //定义行数据字段
                {data: 'id', name: "id", sortable: true},
                {data: 'issueNo', name: "issue_no", sortable: true},
                {data: 'redBall', name: "red_ball", sortable: true},
                {data: 'blueBall', name: "blue_ball", sortable: true},
                {data: 'totalSales', name: "total_sales", sortable: true},
                {data: 'createDate', name: "create_date", sortable: true},
            ]
        });
    }

    //行数据结构
    function RowData(id, issueNo, redBall, blueBall, totalSales, firstPrizeNumber, secondPrizeNumber, createDate) {
        this.id = id;
        this.issueNo = issueNo;
        this.redBall = redBall;
        this.blueBall = blueBall;
        this.totalSales = totalSales;
        this.firstPrizeNumber = firstPrizeNumber;
        this.secondPrizeNumber = secondPrizeNumber;
        this.createDate = createDate;
    }

    </script>
{% endblock content %}

